<template>
	<view v-if="isLoading">
		<!-- 自定义标题栏 -->
		<cover-view class="tar-w" v-if="tarplay" :style="{ height: BarHeight + 'px' }"></cover-view>
		<view class="tar-t" v-if="tarplay" :style="{ height: tarpHaight + 'px',top: BarHeight - 1 + 'px'   }">
			<view class="tar-img" @tap="tarBlack()">
				<image class="fengrui-img" src="../../static/tabar/tarblack.png" mode=""></image>
			</view>
			<view class="" style="margin-left: -80rpx;">文章详情</view>
			<view> </view>
		</view>
		<!-- 顶部返回按钮 -->
		<view class="square-black" :style="{ top: BarHeight + 7 + 'px' }" @tap="tarBlack()">
			<image class="square-black-img" src="../../static/tabar/tarblack.png"></image>
		</view>
		<!-- 顶部图片 -->
		<view class="back-img">
			<image class="fengrui" :src="ArticleInfo.url" mode="aspectFill"></image>
			<view class="back-radius"></view>
		</view>

		<view class="container">
			<!-- 文章标题 -->
			<view class="data-title">
				{{ArticleInfo.article_title}}
			</view>

			<!-- 时间评论回复阅读 -->
			<view class="list-one-qu">
				<view class="list-one-time">
					<view class="list-one-time-y"></view>
					<view class="list-one-time-n">
						时间：{{ArticleInfo.article_create_time}}
					</view>
				</view>
				<view class="list-one-time">
					<view class="list-one-time-l"></view>
					<view class="list-one-time-n">
						阅读：{{ArticleInfo.article_read_num}}
					</view>
				</view>
				<view class="list-one-time">
					<view class="list-one-time-h"></view>
					<view class="list-one-time-n">
						评论：{{ArticleInfo.article_comment_num}}
					</view>
				</view>
			</view>

			<!-- 文章摘要 -->
			<view class="review">
				{{ArticleInfo.article_introduction}}
			</view>

			<!-- 富文本框解析 -->
			<view class="data-w">
				<mp-html :content="ArticleInfo.article_content" />
				<!-- <u-parse :content="ArticleInfo.article_content" @preview="preview" @navigate="navigate"></u-parse> -->
			</view>

			<!-- 功能金刚区 -->
			<view class="quick-flex">
				<view class="quick-flex-width" @click="goPraise">
					<view class="quick-flex-font">{{isPraise?'取消':'点赞'}}</view>
				</view>
				<view class="quick-flex-width-ma" @tap="tapMoney()">
					<view class="quick-flex-font">赞赏</view>
				</view>
			</view>
			<!-- 点赞头像 -->
			<view class="fabulous-w">
				<view class="data-user-i" v-for="(lous, index) in fabulous" :key="index">
					<image :src="lous.avatarUrl" class="fr-swiper-img"></image>
				</view>
			</view>
			
			<!-- 标题 -->
			<view class="title-h">
				评论留言
			</view>
			<!-- 列表 -->
			<view class="square-list" v-for="(item ,index) in CommentList" :key="index">
				<view class="suqare-user">
					<image class="fengrui-img" :src="item.avatarUrl" mode=""></image>
				</view>
				<view class="suqare-info">
					<view class="square-name">
						{{ item.nickName }}
					</view>
					<view class="ssquare-time">
						{{ item.comment_create_time }}
					</view>
					<view class="square-comment">
						<span class="square-p">评论：</span>
						{{ item.comment_content }}
					</view>
				</view>
			</view>
		</view>

		<!-- 评论 -->
		<view class="data-comment-fied">
			<view class="data-comment-w">
				<view class="data-comment-home" @click="goHome">
					<image class="data-ho" src="../../static/tabar/home.png"></image>
				</view>
				<view class="uni-form-item uni-column">
					<view class="uni-input-wrapper">
						<input class="uni-input data-btn" confirm-type="send" v-model="comment_content"
							placeholder="输入内容" />
					</view>
				</view>
				<view class="data-up" @click="inComment">
					发送
				</view>
				<view class="data-poster-w" @tap="trigger">
					<image class="data-ho" src="../../static/data/poster.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	  import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	export default {
		components: {
			 mpHtml
		},
		data() {
			return {
				tarplay: false,
				tarpHaight: '44',
				baclktop: '',
				page: 1,
				pageSize: 10,
				CommentList: [],
				BarHeight: this.BarHeight,
				TabHeight: this.TabHeight,
				ArticleInfo: "",
				comment_content: "",
				//海报
				posterShow: false,
				isPraise: false,
				isLoading: false,
				// 评论头像
				fabulous: [],
				// 微信流量主广告和小程序码
				// #ifdef  MP-WEIXIN
				WxAds: [],
				WxUnlimited: '',
				//#endif
				// 保存海报
				tempFilePath: '',
			}
		},
		onLoad(option) {
			this.aid = option.aid
			this.getArticleDetail();
			this.getCommentList();
			this.getUserArticlePraise();
			// 微信流量主广告和小程序码
		},
		onReady() {
			this._isLoaded = false
		},
		onShow: function() {
			// 打开界面触发函数
			this.backHeight();
		},
		// 生命周期 自定义头部导航
		onPageScroll: function(e) {
			// 判断型号 显示不同标题栏高度
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.statusBarHeight);
					// console.log(res.model);
					that.BarHeight = res.statusBarHeight;
					if (e.scrollTop > 120) {
						that.tarplay = true
					} else {
						that.tarplay = false
					}
				}
			});
		},
		methods: {
			// 赞赏图片弹出
			tapMoney: function() {
				uni.previewImage({
					current: 1,
					urls: ['https://blogapi.aegishub.cn/uploads/images/2020-06-23/1592924828bmZwv4.png'],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 左上角返回按钮
			tarBlack: function() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 判断型号 显示左上角返回按钮
			backHeight: function() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.BarHeight = res.statusBarHeight;
					},

				});
			},
			//获取文章详情
			getArticleDetail: function() {
				const user_id = uni.getStorageSync('user_id');
				var that = this;
				var postData = {
					aid: that.aid,
					user_id: user_id
				}
				//传输信息
				app.request('/Article/getArticleDetail', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.ArticleInfo = res.data.data
							that.ArticleInfo.article_content = res.data.data.article_content
							that.isLoading = true;

						}

						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
						that.setBrowseRecords();
					}
				);
			},
			//文章点赞
			goPraise: function() {
				const user_id = uni.getStorageSync('user_id');
				var that = this;
				var postData = {
					aid: that.aid,
					user_id: user_id
				}
				// 判断是否有user_id
				if (user_id == '') {
					uni.switchTab({
						url: "../me/me"
					})
				}
				//传输信息
				app.request('/Article/ArticlePraise', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.isPraise = res.data.isPraise;
							if (res.data.isPraise) {
								uni.showToast({
									icon: "success",
									title: "点赞成功"
								})
								that.getUserArticlePraise();

							} else {
								uni.showToast({
									icon: "success",
									title: "取消赞成功"
								})
								console.log(user_id)
								console.log(that.fabulous)
							}
						} else {
							uni.showToast({
								icon: "none",
								title: "点赞失败，是否有登录"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
						that.setBrowseRecords();
					}
				);
			},
			// 获取点赞用户头像
			getUserArticlePraise: function() {
				var that = this;
				var settingInfo = '';
				var postData = {
					aid: that.aid
				}
				//传输信息
				app.request('/Article/getUserArticlePraise', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							console.log(res.data)
							that.fabulous = res.data.data
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					},

				);
			},
			//获取文章评论
			getCommentList: function() {
				var that = this;
				var postData = {
					aid: that.aid,
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Article/getCommentList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.CommentList = res.data.data;
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			//文章评论
			inComment: function() {
				const user_id = uni.getStorageSync('user_id')
				var that = this;
				if (!that.comment_content) {
					uni.showToast({
						icon: "none",
						title: "请输入评论内容"
					})
					return;
				}
				var postData = {
					aid: that.aid,
					user_id: user_id,
					comment_content: that.comment_content,
				}
				//传输信息
				app.request('/Article/inComment', postData, 'POST',
					function(res) {
						if (res.data.code == 1) {
							uni.showToast({
								icon: "none",
								title: "评论成功，审核中"
							})
							that.comment_content = "";
							that.getCommentList();
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			//设置本地浏览记录
			setBrowseRecords: function() {
				var browseRecords = uni.getStorageSync('browseRecords')
				const ArticleInfo = this.ArticleInfo;
				if (browseRecords) {
					browseRecords = JSON.parse(browseRecords)
					var data = {
						aid: this.aid,
						article_title: ArticleInfo.article_title,
						article_introduction: ArticleInfo.article_introduction,
						article_create_time: ArticleInfo.article_create_time,
						url: ArticleInfo.url,
						article_comment_num: ArticleInfo.article_comment_num,
						article_read_num: ArticleInfo.article_read_num
					}
					for (var i = 0; i < browseRecords.length; i++) {
						if (browseRecords[i].aid == this.aid) {
							browseRecords.splice(i, 1);
							browseRecords.unshift(data);
							browseRecords = JSON.stringify(browseRecords)
							uni.setStorageSync('browseRecords', browseRecords);
							return;
						}
					}

					browseRecords.unshift(data)
				} else {
					browseRecords = [];
					var data = {
						aid: this.aid,
						article_title: ArticleInfo.article_title,
						article_introduction: ArticleInfo.article_introduction,
						article_create_time: ArticleInfo.article_create_time,
						url: ArticleInfo.url,
						article_comment_num: ArticleInfo.article_comment_num,
						article_read_num: ArticleInfo.article_read_num
					}
					browseRecords.push(data)
				}
				browseRecords = JSON.stringify(browseRecords)
				uni.setStorageSync('browseRecords', browseRecords);
			},
			//返回首页
			goHome: function() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},

			//点击菜单按钮
			trigger: function(e) {
				// switch (e.index) {
				// 	case 1:
				this.posterShow = true;
				// 		break;
				// }

				console.log('我点击了海报')
			},
			// 显示海报临时路径
			poster: function(e) {
				// console.log(e.tempFilePath,'poster')
				var that = this;
				that.tempFilePath = e.tempFilePath;
				console.log(that.tempFilePath)
			},
			// 保存海报
			downSever: function() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.tempFilePath,
					success: function() {
						console.log('save success');
					}
				});
			},
			// 海报
			closePoster: function() {
				console.log('closePoster')
				this.posterShow = false;
			},
			//激励视频广告
			//#ifdef MP-WEIXIN
			// 小程序码
			getWxUnlimited: function() {
				var that = this;
				var postData = {
					scene: 'aid' + that.aid,
					page: 'pages/data/data',
				}
				//传输信息
				app.request('/WxSetting/getWxUnlimited', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.WxUnlimited = res.data.data;
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			}
			// #endif
		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.ArticleInfo.article_title,
				path: '/pages/data/data?aid=' + this.aid,
				imageUrl: this.ArticleInfo.url
			}

		},
	}
</script>

<style>
	/* 激励视频 */

	.data-ad-center {
		border-radius: 20rpx;
		overflow: hidden;
		height: 330rpx;
		width: 100%;
		margin: 40rpx 0rpx;
	}

	/* 点赞头像 */
	.fr-swiper-img {
		width: 100%;
		height: 100%;
	}

	.data-user-i {
		height: 64rpx;
		width: 64rpx;
		border-radius: 8rpx;
		margin: 8rpx;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		overflow: hidden;
	}

	.data-fx-user {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		width: 80%;
		margin: 0rpx 28rpx;
		padding: 30rpx 0rpx;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.fabulous-w {
		padding: 2rpx;
		margin: 60rpx 0rpx;
		display: flex;
		flex-wrap: wrap;
	}

	/* 功能区 */
	.quick-flex-font {
		color: #ffffff;
		text-align: center;
		font-size: 30rpx;
	}

	.quick-flex-w {
		height: 80rpx;
		width: 80rpx;
		overflow: hidden;
		margin: auto;
	}

	.quick-flex-width {
		width: 40%;
		flex-shrink: 0;
		background: linear-gradient(to right, #fa434c, #f99095);
		border-radius: 200rpx;
		height: 66rpx;
		line-height: 66rpx;

	}

	.quick-flex-width-ma {
		width: 30%;
		flex-shrink: 0;
		background: linear-gradient(to right, #0cb9a2, #0fecd2);
		border-radius: 200rpx;
		height: 66rpx;
		line-height: 66rpx;
		margin: 10rpx 20rpx;

	}

	.quick-flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 视频广告 */
	.data-ad {
		margin: 40rpx 0rpx;
	}

	/* 自定义标题栏 */
	.tar-img {
		margin-left: 28rpx;
		height: 48rpx;
		width: 48rpx;
		overflow: hidden;
	}

	.tar-t {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tar-w {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9999;
	}

	/* 评论 */
	.data-poster-w {
		height: 70rpx;
		width: 70rpx;
		overflow: hidden;
	}

	.data-ho {
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
	}

	.data-up {
		color: #A5A5A5;
		width: 20%;
		flex-shrink: 0;
		text-align: center;
	}

	.data-btn {
		background-color: #f9f9f9;
		height: 90rpx;
		padding: 0rpx 40rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
		margin-left: 30rpx;
	}

	.data-comment-home {
		height: 70rpx;
		width: 70rpx;
		overflow: hidden;
		width: 10%;
		flex-shrink: 0;
	}

	.data-comment-bottom {
		background-color: #FFFFFF;
	}

	.data-comment-w {
		display: flex;
		height: 120rpx;
		margin: 0rpx 28rpx;
		background-color: #FFFFFF;
		justify-content: space-between;
		align-items: center;
	}

	.data-comment-fied {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.16);
		z-index: 9990;
	}

	/* 漂浮按钮 */

	/* 列表 */
	.square-p {
		color: #ADADAD;
	}

	.square-comment {
		font-size: 28rpx;
		margin-top: 18rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.ssquare-time {
		color: #ADADAD;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.square-name {
		font-size: 36rpx;
	}

	.suqare-info {
		margin-left: 20rpx;
	}

	.suqare-user {
		height: 70rpx;
		width: 70rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #CECECE;
		flex-shrink: 0;
	}

	.square-list {
		display: flex;
		margin: 60rpx 0rpx;
		overflow: hidden;
	}

	/* 标题 */
	.title-h {
		font-size: 30rpx;
	}

	.title-h:last-child {
		padding-bottom: 120rpx;
	}


	/* 富文本框解析 */
	.data-w {
		color: #999999;
		font-size: 32rpx;
		line-height: 50rpx;
		letter-spacing: 5rpx;
		overflow: hidden;
	}

	/* 文章摘要 */
	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 24rpx 0;
		border-radius: 10rpx;
		color: #ADADAD;
		font-size: 24rpx;
		margin: 40rpx 0rpx;
	}

	/* 时间评论回复阅读 */
	.list-one-time-n {
		color: #D3D3D3;
		font-size: 24rpx;
		height: 16rpx;
		line-height: 16rpx;
		margin-left: 8rpx;
	}

	.list-one-time-h {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #FD6D6D;
	}

	.list-one-time-l {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #70DDF0;
	}

	.list-one-time-y {
		height: 18rpx;
		width: 18rpx;
		border-radius: 50rpx;
		background-color: #4FABFA;
	}

	.list-one-time {
		display: flex;
		margin-top: 18rpx;
		margin-left: 18rpx;
		align-items: center;
	}

	.list-one-qu {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin: 0rpx 0rpx;
	}

	/* 文章标题 */
	.data-title {
		margin-bottom: 10rpx;
		font-size: 40rpx;
	}

	/* 背景图片 */
	.square-black-img {
		height: 58rpx;
		width: 58rpx;
		margin: auto;
		display: block;
	}

	.square-black {
		position: fixed;
		left: 28rpx;
		background: rgba(255, 255, 255, 0.5);
		height: 55rpx;
		z-index: 2;
		width: 100rpx;
		border-radius: 100rpx;
		top: 0rpx;
	}

	.back-radius {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 60rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #FFFFFF;
		z-index: 2;
	}

	.back-img {
		height: 440rpx;
		overflow: hidden;
		position: relative;
	}

	.fengrui {
		height: 100%;
		width: 100%;
	}

	.container {
		padding: 0rpx 40rpx 40rpx;
		margin-bottom: 100rpx;
		overflow: hidden;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	/* 海报 */
	.close-poster-download {
		background-color: #4FABFA;
		width: 34%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 100rpx;
		color: #FFFFFF;
	}

	.close-poster-cancel {
		background-color: #FD6D6D;
		width: 34%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 100rpx;
		color: #FFFFFF;
	}

	.poster {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 9999;
		text-align: center;
		background: rgb(0, 0, 0, 0.2);
	}

	.close-poster {
		/* width: 80rpx; */
		/* height: 80rpx; */
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 100rpx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 9999;
	}

	wm-poster {
		position: fixed;
		top: 200rpx;
		left: 25rpx;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 9999;
	}
</style>
